<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>提示页面</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style media="screen">
      html,body{
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background-color: rgba(255,255,255,0) !important;
      }

      body{

      }
      .wrap{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .tips img{
        width: 70%;
      }

      footer {
          position: fixed;
          left: 0;
          bottom: 0;
          width: 100%;
          min-height: 2.25rem;
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
      }

      footer .item {
          text-align: center;
          opacity: 0;
      }

      footer .active{
        opacity: 1;
      }

      .active > .title {
          color: #F6C92A;
      }

      footer .icon{
        width: 1rem;
        margin: 0 auto;

      }

      footer .icon img{
        width: 90%;
        height: 100%;
      }

      footer .title{
        font-size: 0.5rem;
      }

      .radius_bg{
        position: absolute;
        display: block;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        margin: 0 auto;
        background: #fff;
        left: 50%;
        top:0.125rem;
        transform: translateX(-50%);
      }

      .hj_relative{
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div style="flex:1"></div>
      <div class="tips" style="text-align:right;margin-bottom:3rem;margin-right:0.6rem">
        <img onclick="closeFrame()" src="../images/first_tips.png" alt="">
      </div>
      <footer>
          <div class="flex">
              <div data-id="0" class="item flex_1">
                <div class="icon"><img class="img_icon" src="../images/learn-active.png" alt=""></div>
                <div class="title">课程</div>
              </div>
              <div style="display:none" data-id="1" class="item flex_1">
                <div class="icon"><img class="img_icon" src="../images/info.png" alt=""></div>
                <div class="title">信息</div>
              </div>
              <div data-id="2" class="item flex_1">
                <div class="icon"><img class="img_icon" src="../images/find.png" alt=""></div>
              <div class="title">发现</div>
            </div>
              <div data-id="3" class="item flex_1 active">
                <div class="hj_relative">
                <div class="radius_bg">
                  <div class="hj_icon">
                    <div class="icon"><img class="img_icon" src="../images/mine.png" alt=""></div>
                    <div class="title">我的</div>
                  </div>
                  </div>
                </div>
              </div>
          </div>
      </footer>
    </div>
  </body>
  <script type="text/javascript">
    function closeFrame()
    {
      api.sendEvent({
        name: 'first_tips',
        extra: {
          is_read: 'true'
      }
      });
      api.closeFrame();
    }
  </script>
</html>
